<template>
    <div class="clockVocal_page">
        
        <van-nav-bar
            title="打卡练声"
            left-text="返回" 
            left-arrow
            @click-left="onClickLeft"  
        /> 
        <load-more 
            :pageIndex="pageIndex" 
            :pageSize="pageSize" 
            :totalCount="totalCount" 
            :openRefresh="true"
            @refresh="refresh"
            @loadmore="loadmore"> 
            <div class="live_box">
                <div class="live_prd_list" >
                    <van-image
                    width="100%"
                    height="5.333333rem" 
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                    />
                    <div class="live_info">
                        <div class="title">标题</div>
                        <div class="clear-both tv_desc">
                            <p class="float-left"> 
                                123人参与 
                            </p> 
                            <div class="price float-right" > 
                                <van-button round type="info" size="small">圆形按钮</van-button>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </load-more>  
        <van-divider dashed v-if="goodsList.length==0" style="margin-top:10px;">暂无数据</van-divider>
    </div>
</template>

<script>
import * as api from './../../api/api'
export default {
    data(){
        return{  
            listType:0, //0 所有，1 vip(推荐课程)，2 公益课堂，
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            is_loadding:false,
            goodsList:[], 
        }
    },
    watch:{
        '$route'(to,from){   
            if(to.path=='/goodsList'){
                this.initData();
            }
        }
    },
    mounted(){ 
        this.initData();
    },
    methods:{ 
        initData(){
            this.pageIndex=1;
            this.pageSize=10;
            this.totalCount=0;
            this.is_loadding=false;
            this.goodsList=[];
            this.listType=this.$route.query.listType; 
            console.log(this.listType);
            if(this.$route.query.listType==undefined){
                // this.$notify({ type: 'danger', message: '参数错误' });
                // this.$router.go(-1);
            }else{
                this.getGoodsData();
                this.goodsList=[];
            } 
        },
        onClickLeft(){
            this.$router.go(-1);
        },
        getGoodsData(){
            let vm = this;
            vm.is_loadding = true; 
            if(this.listType==0){
                api.fetchSubjectList({page:vm.pageIndex}).then(res=>{
                    vm.is_loadding = false; 
                    if(res.data.code==200&&res.data.data){  
                        vm.resChangeFun(res.data.data)
                    }
                }).catch(err=>{
                    vm.is_loadding = false;
                })
            }else  if(this.listType==1){
                api.fetchVipList({page:vm.pageIndex}).then(res=>{
                    vm.is_loadding = false; 
                    if(res.data.code==200&&res.data.data){  
                        vm.resChangeFun(res.data.data)
                    }
                }).catch(err=>{
                    vm.is_loadding = false;
                })
            }else  if(this.listType==2){
                // api.fetchSubjectFreeList({page:vm.pageIndex}).then(res=>{
                //     vm.is_loadding = false; 
                //     if(res.data.code==200&&res.data.data){  
                //         vm.resChangeFun(res.data.data)
                //     }
                // }).catch(err=>{
                //     vm.is_loadding = false;
                // })
            }
        },  
        resChangeFun(resData){
            let vm = this;
            if(vm.pageIndex==1){   
                vm.goodsList=resData?resData:[];
                resData.length<10?vm.totalCount=0:vm.totalCount=100;
            }else{
                if(resData.length>0){   
                    vm.goodsList=vm.goodsList.concat(resData);;  
                    vm.totalCount+=10;  
                }else{
                    vm.totalCount=0;
                } 
            } 
        },
        loadmore(pageIndex){  
            // console.log('加载更多中...')
            if(!this.is_loadding){
                this.pageIndex = pageIndex;
                this.getGoodsData(); 
            }  
        },
        refresh(){
            this.pageIndex = 1;
            this.getGoodsData(); 
            // console.log('您下拉刷新了')
        },
    }, 
    components:{ 

    }

}
</script>


<style scoped lang="scss">
.clockVocal_page{
    // padding-top:54px; 
    padding-bottom:54px; 
    height:auto; 
    min-height: 100%;
    background:#fff;
    .live_box{
        padding:.266667rem;
        .live_prd_list{
            width:100%; 
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            border-radius: .16rem;
            overflow: hidden;
            margin-bottom: .266667rem;
            .live_info{
                padding:.3rem;
                .title{
                    font-size:.48rem; 
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    color:#000;
                }
                .tv_desc{
                    margin-top:.266667rem;
                    .price{
                        color:#e4393c;
                        font-size:.4rem;
                    }
                }
            }
        }
    }  
}

</style>
